﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/static/js/common.js"></script>
    <script src="../static/hotkeys.min.js"></script>
    <script src="../static/jqueryui/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="../js/jqueryui/jquery-ui.min.css">
    <script src="../static/hotkeys.min.js"></script>

</head>
<style>
    body {
        margin: 0;
    }

    .canvas {
        border-style: solid;
        border-width: 1px;
        border-color: #000
    }

    /* 选中行的样式 */
    .select {
        background-color: Green;
    }

    .tool {
        background-color: rgba(248, 248, 255, 0.5);
        top: 0px;
        left: 0px;
        position: absolute;
        width: 30%;
        height: 30%;
    }
</style>
<script>
    var data = []
</script>

<body>
    <div id="main">
        <canvas id="canvas" :width="mapWidth" :height="mapHeight"
                style="background-image: url(../SanDongShengAoMap.png); background-repeat:no-repeat; background-size:100%;">
        </canvas>
        <div class="tool" v-show="toolPanel">
            <el-button-group>
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="currFunctionType=functionType.draw">
                    画图
                </el-button>
                <el-button type="primary" size="mini" icon="el-icon-mouse"
                           @click="currFunctionType=functionType.selectPatterning">
                    选择
                </el-button>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="addPatterning">添加图形（F2）</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="delLastPath">
                    删除当前图形（ctrl+z）
                </el-button>
                <el-button type="primary" size="mini" icon="el-icon-upload" @click="save">
                    保存
                </el-button>
            </el-button-group>
            </br>
            当前选择图形名称<input v-model="currPatterningObj.name">
            <div>
                已有图形
                <table>
                    <tr v-for="item in patterningList" v-bind:class="{ select: item.id=== currPatterningObj.id}">
                        <!-- <td>{{item.id}}</td> -->
                        <td>{{item.name}}</td>
                    </tr>
                </table>
            </div>
            <!-- <textarea v-model="jsonString">
            </textarea> -->
        </div>
    </div>
    <script type="text/javascript">
        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        var DEFAULT_NAME = "未命名";
        //canvas鼠标右键功能类型
        var functionType = {
            draw: "draw",//画图
            isInPath: "isInPath",//判断是否在某张图形的路径上
            selectPatterning: "selectPatterning"//选中图形
        };
        //图形对象
        function Patterning() {
            return {
                id: guid(),
                name: DEFAULT_NAME,
                x: 0,
                y: 0,
            }
        };
        //画板对象
        var canvas;
        new Vue({
            el: '#main',
            data: {
                z: 1,
                dialogVisible: false,
                imageH: 75,
                imageW: 75,
                imgBlack: null,
                imgCurr: null,
                toolPanel: false,
                currFunctionType: functionType.draw,//当前canvas鼠标右键功能类型
                currPatterningObj: new Patterning(),//当前图形
                patterningList: [],
                mapWidth: 8410,
                mapHeight: 11890
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //绘制图
                DrawAll: function () {
                    canvas.width = canvas.width;
                    for (var i = 0; i < this.patterningList.length; i++) {
                        this.Draw(this.patterningList[i]);
                    }
                },
                confirm: function () {
                    console.log(window.event.pageX)
                    console.log(window.event.pageY)
                },
                //绘图
                Draw: function (patterningObj) {
                    d2d = canvas.getContext('2d');
                    //图形居中处理
                    var image_x = patterningObj.x - this.imageH / 2;
                    var image_y = patterningObj.y - this.imageW;
                    //当前操作图形绿色标记
                    if (patterningObj.id == this.currPatterningObj.id)
                        d2d.drawImage(this.imgGreen, image_x, image_y, this.imageW, this.imageH);
                    else
                        d2d.drawImage(this.imgBlack, image_x, image_y, this.imageW, this.imageH);
                    //图形外部画隐形边框
                    d2d.beginPath();
                    d2d.rect(image_x, image_y, this.imageW, this.imageH);
                    d2d.closePath();
                },
                //添加图形事件
                addPatterning: function () {


                    if (this.currPatterningObj.name === DEFAULT_NAME) {
                        this.$message('完成上一次选点并命名图形后在进行添加图形操作');
                        return
                    }
                    //设置当前单击事件为画图
                    this.currFunctionType = functionType.draw;
                    this.currPatterningObj = new Patterning();
                    this.patterningList.push(this.currPatterningObj);
                    this.$message('准备就系：点击图形添加图形');
                },
                //删除选中图形的最后路径点
                delLastPath: function () {
                    var app = this;
                    if (this.patterningList === 1)
                        return
                    this.$confirm(' 是否确认继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {

                        app.patterningList.remove(app .currPatterningObj);
                        app.$message('撤销图形');
                        app.delete();
                        app.currPatterningObj = app .patterningList[app .patterningList.length - 1];
                        app.DrawAll();

                    }).catch(function () {
                        app .$message('已取消删除!');
                        
                    });

                },
                save: function () {
                    var app = this;
                    if (this.currPatterningObj.name === DEFAULT_NAME || this.currPatterningObj.x === 0) {
                        app.$message("初始化标点信息后在进行保存操作");
                        return;
                    }

                    myAjax("Post", null, "/api/FX_MapPosition/save", this.currPatterningObj, function () {
                        app.$message('保存成功');
                    }, false);
                },
                delete: function () {
                    var app = this;
                    myAjax("Post", null, "/api/FX_MapPosition/DeleteMuti", [this.currPatterningObj.id], function () {
                        app.$message('刪除成功');
                    }, false);
                },
                getList: function () {
                    var app = this;
                    myAjax("Post", null, "/api/FX_MapPosition/getlist", { "model": {}, "offset": 0, "limit": 10 }, function (resp) {
                        app.patterningList = resp.data.pageData;
                    }, false);
                }
            },
            mounted: function () {
                var app = this;
                //获得画板
                canvas = document.getElementById("canvas");
                //---初始化图形
                this.imgBlack = new Image();
                this.imgBlack.src = "../static/positionBlack.png";
                this.imgBlack.onload = function () {

                    app.imgGreen = new Image();
                    app.imgGreen.src = "../static/positionGreen.png";
                    app.imgGreen.onload = function () {
                        app.getList();
                        //向图形list 放入第一个图形对象
                        app.patterningList.push(app.currPatterningObj);
                        app.DrawAll();
                    };
                };

                //---初始化图形结束
                $(".tool").resizable();//
                // $(".tool").draggable();//设置缩放


                //为画板添加点击事件
                canvas.onclick = function (e) {
                    var d2d = canvas.getContext('2d');
                    // 得到鼠标的坐标
                    var x = e.pageX, y = e.pageY;
                    d2d.clearRect(0, 0, app.mapWidth, app.mapHeight)
                    switch (app.currFunctionType) {
                        case functionType.draw:
                            app.currPatterningObj.x = x;
                            app.currPatterningObj.y = y;
                            app.DrawAll();
                            break;
                        case functionType.selectPatterning:
                            // 遍历绘制图形
                            for (var i = 0; i < app.patterningList.length; i++) {
                                var patterningObj = app.patterningList[i];
                                app.Draw(patterningObj);
                                if (d2d.isPointInPath(x, y)) {
                                    app.currPatterningObj = patterningObj;
                                    continue;
                                }
                            }
                            app.DrawAll();
                            break;
                        default:
                    }
                }

                //快捷键注册
                hotkeys('f2,ctrl+z,ctrl+q', function (event, handler) {
                    switch (handler.key) {
                        case 'f2':
                            app.addPatterning(); return;
                            break;
                        case 'ctrl+z':
                            app.delLastPath(); return;
                            break;
                        case 'ctrl+q':
                            app.toolPanel = !app.toolPanel;
                            return;
                            break;
                        default: alert("");
                    }
                });
                this.$message('ctrl+q开启工具面板');
            },
            watch: {

            },
            computed: {
                jsonString: {
                    get: function () {
                        console.log("jsonStringget");
                        return JSON.stringify(this.patterningList);
                    }
                }
            }
        })
    </script>
</body>

</html>